import VueRouter from 'vue-router'

// 导入对应的路由组件
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
import ShopcarContainer from './components/tabbar/ShopcarContainer.vue'
import SearchContainer from './components/tabbar/SearchContainer.vue'
import NewsList from './components/news/NewsList.vue'
import NewsInfo from './components/news/NewsInfo.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // 配置路由规则
    {
      path: '/',
      redirect: '/home'
    },
    // { 这种写法是嵌套路由，就是说 假如HomeContainer这个组件含有<router-view></router-view> 当匹配到/home/newsList时，会同时显示HomeContainer和NewsList
    //   path: '/home',
    //   component: HomeContainer,
    //   children: [{
    //     path: 'newsList',
    //     component: NewsList
    //   }]
    // },
    {
      path: '/home',
      component: HomeContainer
    },
    {
      path: '/member',
      component: MemberContainer
    },
    {
      path: '/shopcar',
      component: ShopcarContainer
    },
    {
      path: '/search',
      component: SearchContainer
    },
    { //这种写法,当在HomeContainer这个页面是，点击某个按钮跳转 /home/newsList，那么会以NewsList这个页面替换掉HomeContainer
      path: '/home/newsList',
      component: NewsList
    },
    {
      path: '/home/newsInfo/:id',
      component: NewsInfo
    }
  ],
  linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})

// 把路由对象暴露出去
export default router